<template>
  <div id="app">
    <div class="menus">
      <el-menu :default-active="activeId" class="el-menu-vertical-demo" @select="selectMenu" :collapse="isCollapse">
        <el-submenu :index="item.id" v-for="item in menus" :key="item.id">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">{{ item.name }}</span>
          </template>
          <el-menu-item-group v-if="item.childrens">
            <el-menu-item v-for="child in item.childrens" :index="child.id" :key="child.id">{{ child.name }}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </div>
    <div class="main">
      <div class="des">
        <div class="des-title">
          <h4 class="tit">场景描述：</h4>
          <div>{{ des }}</div>
        </div>
        <div class="rules">
          <h4 class="tit">已定义规则：</h4>
          <table class="rule-table">
            <tr v-for="(item, index) in rules" :key="index">
              <td>{{ item }}</td>
            </tr>
          </table>
        </div>
        <div class="password-wrap">
          <h4 class="tit">校验：</h4>
          <div class="demo-input-suffix">
            <div class="label">密码：</div>
            <el-input placeholder="请输入密码" v-model="password">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </div>
        </div>
        <div class="verify-wrap">
          <el-button @click="verify" type="success">校验</el-button>
        </div>
        <div class="result">
          <h4>校验结果</h4>
          <div>{{ verifyResult }}</div>
        </div>
      </div>
      <div class="code">
        <h4 class="code-title">JAVA DEMO代码：</h4>
        <codemirror ref="mycode" :value="code" :options="cmOptions" class="mycode"> </codemirror>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import menus from "@/utils/menus.js";
  import NProgress from "nprogress"; // progress bar
  import "nprogress/nprogress.css"; // progress bar style
  import { codemirror } from "vue-codemirror";
  require("codemirror/mode/clike/clike.js");
  import "codemirror/theme/ayu-dark.css";
  import "codemirror/theme/darcula.css";
  export default {
    name: "app",
    components: {
      codemirror,
    },
    data() {
      return {
        isCollapse: false,
        verifyResult: "",
        password: "",
        code: "",
        rules: [],
        des: "",
        activeId: "",
        cmOptions: {
          value: "",
          mode: "text/x-java",
          theme: "darcula",
          readOnly: true,
        },
        menus: menus,
      };
    },
    created() {
      this.activeId = this.$route.query.id || "1-1";
      this.$router.push({ path: "/index", query: { id: this.activeId } });
      this.selectMenu(this.activeId);
    },
    methods: {
      selectMenu(key) {
        NProgress.start();
        const result = this.findMenuById(menus, key);
        this.code = result.code;
        this.des = result.des;
        this.rules = result.rules;
        this.$router.push({ query: { id: key } });
        NProgress.done();
      },
      findMenuById(menus, id) {
        let result;
        menus.forEach((item) => {
          if (item.id === id) {
            result = item;
          } else if (Object.prototype.hasOwnProperty.call(item, "childrens")) {
            let obj = this.findMenuById(item.childrens, id);
            if (obj) {
              result = obj;
            }
          }
        });
        if (result) {
          return result;
        }
      },
      // 校验
      verify() {
        const url = "http://localhost:8080/xxx";
        let params = { password: this.password };
        axios.get(url, { params: params }).then((res) => {
          console.log(res);
          this.verifyResult = res;
        });
      },
    },
  };
</script>

<style>
  #app {
    display: flex;
  }
  .menus {
    width: 250px;
    height: 100vh;
    border-right: solid 1px #e6e6e6;
    overflow-y: auto;
  }
  .menus .el-menu {
    border-right: 0 !important;
  }
  .main {
    width: calc(100vw - 250px);
    height: 100vh;
    display: flex;
  }
  .des {
    width: 40%;
    padding: 0 20px;
    height: 100vh;
    border-right: solid 1px #e6e6e6;
    overflow: auto;
    box-sizing: border-box;
  }
  .code {
    width: 60%;
    height: 100vh;
  }
  .mycode {
    width: 96%;
    height: 90%;
    margin: 0 auto;
    font-size: 14px;
  }
  .code-title {
    color: red;
    padding: 20px 15px;
    margin: 0;
  }
  .CodeMirror {
    height: calc(100vh - 60px) !important;
  }
  .rule-table {
    width: 100%;
    border-collapse: collapse;
  }
  .rule-table td {
    padding: 6px 10px;
    border: 1px solid #e6e6e6;
  }
  .demo-input-suffix {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
  }
  .demo-input-suffix .label {
    width: 80px;
  }
  .rules h4,
  .password-wrap h4 {
    margin: 40px 0 20px;
  }
  .result {
    background: #e6e6e6;
    padding: 10px 20px;
    margin-top: 20px;
    min-height: 200px;
  }
  .result h4 {
    color: red;
    margin: 0;
    padding: 6px 0 16px 0;
  }
  .verify-wrap {
    text-align: right;
  }
  .tit {
    border-left: 4px solid #ff8037;
    padding-left: 14px;
  }
</style>
